<template>
  <div>
    <br>
    <!-- 搜索行 -->
    <el-row :gutter="10"  class="first">
      <el-col :span="4">
        <el-select v-model="pno" filterable placeholder="请选择打包单编号" clearable>
          <el-option v-for="item in pnoList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="sno" filterable placeholder="请选择选货单编号" clearable>
          <el-option v-for="item in snoList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="selectTime()" value-format="yyyy-MM-dd" :clearable="true">
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="managePack()">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="exportTable()" icon="el-icon-upload">导出当前页</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="refresh()" icon="el-icon-refresh"></el-button>
      </el-col>
    </el-row>
    <br>

    <!-- 表格数据 -->
    <el-row>
      <template>
        <el-table :data="packList" tooltip-effect="dark" style="width: 90%" class="table1">
          <el-table-column type="expand" width="20">
            <template slot-scope="scope">
              <el-table :data="scope.row.orderItemList" tooltip-effect="dark" style="width: 80%">
                <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
                <el-table-column prop="goodsName" align="center" label="产品名称" width="200"></el-table-column>
                <el-table-column prop="goodsNumber" align="center" label="产品编号" width="200"></el-table-column>
                <el-table-column prop="weight" align="center" label="重量(g)" width="100"></el-table-column>
                <el-table-column prop="count" align="center" label="数量" width="100"></el-table-column>
                <el-table-column prop="unitPrice" align="center" label="单价(g/元)" width="130"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="70" align="center" type="index">
          </el-table-column>
          <!-- <el-table-column prop="id" label="id" width="40" align="center">
          </el-table-column> -->
          <el-table-column prop="pno" label="打包单编号" width="200" align="center">
          </el-table-column>
          <el-table-column prop="sno" label="选货单编号" width="200" align="center">
          </el-table-column>
          <el-table-column prop="operatorTime" label="操作时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="operator" label="操作人" width="120" align="center">
          </el-table-column>
          <el-table-column prop="depotId" label="仓库" width="80" align="center">
          </el-table-column>
          <el-table-column prop="customer" label="客户" width="150" align="center">
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价" width="150" align="center">
          </el-table-column>
        </el-table>
      </template>
    </el-row>

    <!-- 分页 -->
    <el-row>
      <template>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="prev, pager, next, jumper, sizes, total"
            :total="total">
          </el-pagination>
        </div>
      </template>
    </el-row>

  </div>
</template>

<script>
export default{
  data(){
    return{
      // 这里放数据
      current: 1,
      size: 10,
      total: 0,
      pno: "",
      sno: "",
      time: [],
      startTime: "",
      endTime: "",
      packList: [],
      snoList: [],
      pnoList: [],
    }
  },
  methods:{
    refresh:function(){
      window.location.reload();
    },
    download: function (data,fileName) {
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)

      document.body.appendChild(link)
      link.click()
    },
    exportTable:function(){
      let data = {
        pno: this.pno,
        sno: this.sno,
        startTime: this.startTime,
        endTime: this.endTime,
        current: this.current,
        size: this.size,
      }
      this.$axios.post("salePack/exportSalePack", data, { responseType: 'blob' }).then(res => {

        let exportFlag = res.headers['exportflag'];
        if(exportFlag == false){
          this.$message.error("导出失败");
          return;
        }
        
        let contentDisposition = res.headers['content-disposition'];
        if (contentDisposition) {
          var fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");
          console.log(fileName);
        }
        this.download(res.data,fileName)
      })
    },
    selectTime: function () {
      if (!this.time) {
        this.time = []
      }
      console.log(this.time);
      this.startTime = this.time[0];
      this.endTime = this.time[1];
    },
    managePack: function () {
      let data = {
        pno: this.pno,
        sno: this.sno,
        startTime: this.startTime,
        endTime: this.endTime,
        current: this.current,
        size: this.size,
      }
      console.log(data);
      this.$axios.post("salePack/managePack", data).then(res => {
        console.log(res.data);
        this.packList = res.data.data.data;
        this.total = res.data.data.total;
        this.size = res.data.data.size;
      })
    },
    //分页函数
    handleSizeChange(val) {
      //页面大小修改时触发
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getCurrentPageData();
    },
    handleCurrentChange(val) {
      //页码修改时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.current = val;
      //发请求获取数据
      this.getCurrentPageData();
    },
    getCurrentPageData: function () {
      this.managePack()
    },
    findAllSno: function () {
      this.$axios.get("saleOrder/findAllSno").then(res => {
        if (res.data.code == 200) {
          this.snoList = res.data.data;
          console.log(res.data.data);
        }
      })
    },
    findAllPno: function () {
      this.$axios.get("salePack/findAllPno").then(res => {
        if (res.data.code == 200) {
          this.pnoList = res.data.data;
          console.log(res.data.data);
        }
      })
    },
  },
  mounted:function(){
    this.findAllPno();
    this.findAllSno();
    this.managePack();
  }
}
</script>

<style scoped>
.first {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}

.block {
  text-align: center;
}

.table1,.table1 th,.table1 td{
  border: 5px dotted rgb(175, 239, 222);
}

.table1{
  margin-left: 55px;
}
</style>